<template>
    <div class="ysjcxx">
        <!-- 搜索区域 -->
        <el-form :model="queryParams" label-width="68px">
            <div style="display: flex;">
                <el-form-item label="姓名">
                    <el-input v-model="queryParams.name" size="small" placeholder="请输入姓名" />
                </el-form-item>
                <el-form-item label="时间">
                    <el-date-picker v-model="dateRange" type="daterange"  value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期"  :editable="false"
                        end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>
            </div>
            <span style="float: right; margin: 3px 10px;">
                <el-button type="primary" @click="search" size="mini">查询</el-button>
                <el-button style="margin:0 8px" @click="reset" size="mini">重置</el-button>
                <el-button type="info" plain icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
            </span>
        </el-form>
        <el-table ref="multipleTable" :data="columns" tooltip-effect="dark" style="width: 100%">
            <el-table-column prop="name" label="人员姓名" align="center">
            </el-table-column>
            <el-table-column prop="inTime" label="入园时间" align="center">
            </el-table-column>
            <el-table-column prop="outTime" label="出园时间" align="center">
            </el-table-column>
        </el-table>
        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
            @pagination="getAttendanceList" />
    </div>
</template>

<script>
import { getAttendanceList, attendanceExport } from '@/api/teach/attrecord'
export default {
    data() {
        return {
            columns: [],
            queryParams: {
                pageNum: 1,
                pageSize: 10,
            },
            total: 10,
            value1: '',
            dateRange: [],
        }
    },
    created() {
        this.search()
    },
    methods: {
        async getAttendanceList() {
            const { rows, code, msg, total } = await getAttendanceList(this.queryParams)
            if (code === 200) {
                this.columns = rows
                this.total = total
            } else {
                this.$message.error(msg)
            }
        },
        search() {
            if (this.dateRange) {
                const obj = {
                    ...this.queryParams,
                    'params[beginTime]': this.dateRange[0],
                    'params[endTime]': this.dateRange[1],
                }
                this.queryParams = obj
            }
            this.getAttendanceList()
        },
        reset() {
            this.queryParams = {
                pageNum: 1,
                pageSize: 10,
            }
            this.dateRange = []
            this.search()
        },
        changeTime(e) {

            this.queryParams.passTime = e
        },
        /** 导出按钮操作 */
        handleExport() {
            const queryParams = this.queryParams
            this.$confirm('是否确认导出所有人员的考勤?', "警告", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(function () {
                return attendanceExport(queryParams);
            }).then(response => {
                this.download(response.msg);
            })
        }
    },



}
</script>

<style lang="scss" scoped>
.ysjcxx {
    padding: 30px;
}

.el-form {
    display: flex;
}
</style>
